import React, { useEffect, useState } from "react";
import { Routes, Route, useNavigate } from "react-router-dom";
import { Layout, Menu, theme } from "antd";
import Demand from "./demand";
import BailIssue from "./bailIssue";

const { Content, Sider } = Layout;

const BailmentList = () => {
  const [userId, setUserId] = useState(null); // 用户ID状态
  const [items1, setItems1] = useState([]); // 菜单项状态

  const navigate = useNavigate();

  // 模拟从后端获取用户ID的函数
  const fetchUserId = () => {
    // 发送请求获取用户ID的逻辑...
    // 假设请求成功后将用户ID设置为1
    setUserId(1);
  };

  useEffect(() => {
    // 在组件挂载时获取用户ID
    fetchUserId();
  }, []);

  useEffect(() => {
    // 当用户ID变化时，根据用户ID生成菜单项
    if (userId) {
      // 根据用户ID动态生成菜单项
      setItems1([
        //添加点击跳转事件（key对应跳转的路由）
        // UserCenter组件中的菜单项，将key属性改为子页面的路径
        
  { label: "我的需求", key: "/bailmentlist/demand" },
  { label: "发布需求", key: "/bailmentlist/bailissue" },
      ]);
    }
  }, [userId]);
  
  const handleMenuClick = (key) => {
    console.log(key);
    navigate(key);
  };

  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();
  return (
    <Layout>
      
        <Sider
          width={200}
          style={{
            background: colorBgContainer,
          }}
        >
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{
              height: "100%",
              borderRight: 0,
            }}
            items={items1}
            onClick={({ key }) => handleMenuClick(key)}
          />
        </Sider>
        {/* <Layout
          style={{
            padding: "0 24px 24px",
          }}
        > */}
          <Content
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
              background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            {/* 在BailmentList组件中，修改Routes组件中的Route路径，确保相对于父路由的路径 */}
            <Routes>
              {/* <Route path="/" element={<BailmentList />}> */}
              <Route path="demand" element={<Demand />} />
              <Route path="bailissue" element={<BailIssue />} />
              {/* </Route> */}
            </Routes>
          </Content>
{/*         
      </Layout> */}
    </Layout>
  );
};
export default BailmentList;
